<template>
	<view id="index-about">
		<header-back :headerTitle="$lang('title')"></header-back>
		<view class="content-about">
			<view class="header">
				<image src="/static/logo_life_01.png" class="logo-icon" mode=""></image>
				<view class="h1">Chain Life</view>
				<view class="tip">v1.0.0</view>
			</view>
			<view class="content">
				<view class="title">
					BLOCKCHAIN + E-COMMERCE 
					<br>
          {{ $lang('description') }}
				</view>
				<view class="h5" v-html="$lang('content')">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
export default {
	data() {
		return {

		};
	},
	onLoad() {

	},
	components: {
		headerBack
	},
	onShow() {

	},
	methods: {

	}
};
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-about {
		width: 100%;
		padding: 50rpx 32rpx;
		box-sizing: border-box;
		.header {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.logo-icon {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 20rpx;
			}
			.h1 {
				font-size: 36rpx;
				font-weight: 600;
				color: #292929;
				line-height: 50rpx;
				margin-bottom: 6rpx;
			}
			.tip {
				font-size: 26rpx;
				font-weight: 600;
				color: #92969E;
				line-height: 36rpx;
			}
		}
	}
	
	.content {
		padding-top: 56rpx;
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #292929;
			line-height: 44rpx;
			margin-bottom: 34rpx;
		}
		.h5 {
			font-size: 26rpx;
			color: #292929;
			line-height: 36rpx;
		}
	}
	
</style>
